<template>
  <div class="hotel-wrap">
    <div class="hotel">
      <h2 class="hotelh2">订酒店</h2>
      <search></search>
      <el-row>
        <el-col :span="8">
          <div class="boxspan">
            <i class="el-icon-edit-outline"></i>
            <div>
              <h4>住宿攻略</h4>
              <p>区域攻略到特色主题，应有尽有</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="boxspan">
            <i class="el-icon-coin"></i>
            <div>
              <h4>专享价格</h4>
              <p>多平台价格对比，天天专享特惠</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="boxspan">
            <i class="el-icon-user"></i>
            <div>
              <h4>真实点评</h4>
              <p>超过100万真实用户点评和游记</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <h2 class="hotel_title">主题酒店</h2>
      <theme></theme>
      <h2 class="hotel_title">特价酒店</h2>
      <special></special>
    </div>
    <div class="youhuique" v-show="YHQ">
      <div>
        <img src="../assets/iconAdvertising.png" alt="" @click="isLq" />
        <span class="el-icon-circle-close" @click="exit"></span>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import footers from "../commonality/Footer.vue";
import theme from "../components/hotel/ThemeHotel.vue";
import special from "../components/hotel/SpecialHote.vue";
import search from "../components/hotel/searchinput.vue";
export default {
  name: "WorkspaceJsonDestination",

  data() {
    return {
      YHQ: false,
      height:0
    };
  },

  mounted() {
    console.log(document.body.clientHeight);
    this.height = document.body.clientHeight;
    let yhq = window.sessionStorage.getItem('YHQ')
    window.scrollTo(0, 0);
    if(yhq){
      this.YHQ = false;
    }else{
      this.YHQ = true;
    }
  },
  components: {
    footers,
    theme,
    special,
    search,
  },

  methods: {
    exit() {
      this.YHQ = false;
    },
    isLq() {
      if(sessionStorage.getItem('cookie-session')){
        this.$message({
          message: "领取成功",
          type: "success",
        });
        this.YHQ = false;
        window.sessionStorage.setItem('YHQ',true)
      }else{
        this.$router.push('/login')
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hotel-wrap {
  margin-top: 100px;
  font-size: 18px;
  .hotelh2 {
    margin-bottom: 10px;
  }
  .hotel {
    width: 1200px;
    min-height: 800px;
    margin: 0 auto;
    margin-bottom: 100px;
    .hotel_title {
      text-align: center;
      margin-top: 40px;
    }
    .boxspan {
      margin-top: 30px;
      display: flex;
      i {
        font-size: 40px;
        margin-right: 20px;
        margin-top: 5px;
      }
      p {
        font-size: 16px;
        padding: 5px 0;
      }
    }
  }
}
.youhuique {
  width: 100%;
  height: 100%;
  background: rgba(3, 3, 3, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  text-align: center;
  > div {
    position: relative;
    > img {
      margin-top: 100px;
      width: 500px;
      height: auto;
      cursor: pointer;
    }
    > span {
      position: absolute;
      top: 140px;
      color: rgb(255, 255, 255);
      font-size: 30px;
    }
  }
}
</style>